<template>
  <div class="ele-body">
    <a-row :gutter="16">
      <a-col :span="24">
        <a-card>
          <a-form>
            <a-form-item label="机构名称" class="gropname">
              <!-- <a-select style="width: 200px" v-model:value="orgname" @click="handleMenuClick">
                    <a-select-option value="郑州供电车间">郑州供电车间</a-select-option>
                    <a-select-option value="郑州接触网维修工区">郑州接触网维修工区</a-select-option>
                    <a-select-option value="五里堡接触网维修工区">五里堡接触网维修工区</a-select-option>
                </a-select> -->
              <a-tree-select
                v-model:value="orgname"
                show-search
                style="width: 220px"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"                               
                allow-clear
                tree-default-expand-all
                :tree-data="treeData"
              />
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>

    <div class="notice">
      <div class="center">
        <span style="font-weight: 400;">提醒：郑州供电车间11班组编号为</span> <span style="font-weight: 700;">11</span> 
        <span style="font-weight: 400;">的</span> <span style="font-weight: 700;">验电器 已报废</span>
      </div>
      <div class="btncenter">
        <a-button type="primary" class="infodetail" @click="info">详情查看</a-button>
        <!-- <a-modal v-model:visible="visible" title="详情介绍" @ok="handleOk">
          <p>机构名称：郑州供电车间11班组</p>
          <p>编号：11</p>
          <p>工具：验电器</p>
          <p>审核人：王五</p>
          <p>有效截至日期：20230311</p>
          <p>试验结论：已报废</p>
        </a-modal> -->
      </div>
    </div>
    <div id="components-table-demo-size">
      <a-table :columns="columns" :data-source="data" size="middle">
        <template #bodyCell="{ column,record }">
          <template v-if="column.title === '操作'">
            <a-button type="primary" class="option" @click="testClick(record.id)"> 试验历史数据</a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref,h } from 'vue';
import { GdScrapStatApi } from '@/api/insulated/GdScrapStatApi'
import { Modal } from 'ant-design-vue';

let orgname = ref('请选择')

const columns = [{
    title: '车间',
    dataIndex: 'shoproom',
}, {
    title: '班组',
    dataIndex: 'unit',
}, {
    title: '绝缘工具',
    dataIndex: 'insulatedtools',
}, {
    title: '编号',
    dataIndex: 'idnum',
}, {
    title: '是否补充',
    dataIndex: 'supply',
}, {
    title: '规格型号',
    dataIndex: 'size',
}, {
    title: '保管人',
    dataIndex: 'keeper',
}, {
    title: '试验日期',
    dataIndex: 'testdate',
}, {
    title: '有效截止日期',
    dataIndex: 'validdate',
}, {
    title: '试验人',
    dataIndex: 'tester',
}, {
    title: '审核人',
    dataIndex: 'auditor',
}, {
    title: '投运日期',
    dataIndex: 'commissiondate',
}, {
    title: '试验结论',
    dataIndex: 'testresult',
}, {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
}
];

const treeData = ref([{
      title: '郑州供电车间',
      value: 'parent 1',
      children: [{
          title: '郑州接触网维修工区',
          value: 'leaf1',
        }, {
          title: '五里堡接触网维修工区',
          value: 'leaf2',
        }],
  }]);

  const info = () => {
      Modal.info({
        title: '报废详情',
        content: h('div', {}, [h('p', '机构名称：郑州供电车间 11班组'), h('p', '绝缘工具：验电器'), 
        h('p', '编号：11'), h('p', '审核人：王五'), h('p', '有效截至日期：20230311') ]),
        onOk() {
          console.log('ok');
        },
      });
    };
    
  // const visible = ref(false);
    // const showDetail = () => {
    //   visible.value = true;
    // };
    // const handleOk = e => {
    //   console.log(e);
    //   visible.value = false;
    // };

    const testClick = (id) =>{
      console.log(id)
    }
//     const data = [
//     // {
//     // key: '2',
//     // shoproom:'郑州供电车间',
//     // unit: '12',
//     // insulatedtools: '接地杆套',
//     // idnum:2,
//     // supply:'是',
//     // size:'16',
//     // keeper:'李明',
//     // testdate:'2023-3-26',
//     // validdate:'2325-3-26',
//     // tester:'张伟',
//     // auditor:'王梅',
//     // commissiondate:'2023-4-10',
//     // testresult:'已通过',
//     // }
// ];
const data = ref([])

// const handleMenuClick = e => {
//     console.log('click', e);
// };

onMounted(async () => {
    const result = await GdScrapStatApi.find()
    console.log(result);
    data.value = result.data
})

</script>

<style lang="less" >
//     .demo-dropdown-wrap :deep(.ant-dropdown-button) {
//   margin-right: 8px;
//   margin-bottom: 8px;
// }
.cont {
    // display: flex;
    position: relative;
}

.demo-dropdown-wrap {

    // text-align: center;
}

.center {
    align-self: center;
    padding: 2px 2px 2px 2px;
    box-sizing: border-box;
    width: 100%;
}

.notice {
    display: flex;
    justify-content: space-between;
    // vertical-align: middle;
    align-items: center;
    border-width: 0px;
    // position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 51px;
    background: inherit;
    background-color: rgba(202, 249, 130, 0.250980392156863);
    border: none;
    border-radius: 0px;
    box-shadow: none;
    font-size: 16px;
    text-align: left;
}

.btncenter {
    left: 0px;
    top: 0px;
    margin: 0;
    padding: 0;
    width: 82px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.infodetail {
    // color: #FFFFFF;
    border-width: 0px;
    // position: absolute;
    cursor: pointer;
    left: 0px;
    top: 0px;
    margin: 0;
    padding: 0;
    width: 82px;
    height: 35px;
    line-height: 30px;
    background: inherit;
    background-color: rgba(22, 155, 213, 1);
    border: none;
    border-radius: 5px;
    box-shadow: none;
}

.gropname {
    font-size: 24px;
    font-weight: 700;
    text-align: left;
}

#components-table-demo-size h4 {
    margin-bottom: 16px;
}
</style>